<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车案例</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="title">购物车</div>
    <table class="table" width="700" border="1">
      <thead>
        <tr>
          <th width="60">
            <label for="">
              <input type="checkbox" class="allcheck" />
              全选
            </label>
          </th>
          <th width="60">序号</th>
          <th>商品名称</th>
          <th>商品图片</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>价格小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr align="center">
          <td>
            <input class="check" type="checkbox" />
          </td>
          <td>1</td>
          <td>苹果</td>
          <td class="img">
            <img src="" style="width: 70px; height: 70px" alt="" />
          </td>
          <td class="price">100</td>
          <td class="num">
            <span class="reduce">-</span>
            <input value="1" type="text" />
            <span class="add">+</span>
          </td>
          <td class="account">100</td>
          <td>
            <button class="del">删除</button>
          </td>
        </tr>
        <tr>
          <td colspan="8" align="center">暂无商品信息</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="8" align="right">
            <span class="totalNum">商品总数：<i>0</i></span>
            <span class="totalPrice">合计总价：<i>0.00</i></span>
            <span class="buy">立即付款</span>
          </td>
        </tr>
      </tfoot>
    </table>

    <script src="../jquery.min.js"></script>
    <script>
      function render() {
        $.ajax({
          url: "http://124.223.14.236:3001/api/cart",
          method: "get",
          headers: {
            Authorization: localStorage.getItem("token"),
          },
          success(res) {
            // console.log(res);
            const arr = res.data
              .map(
                (item, i) => `
            <tr align="center">
          <td>
            <input class="check" type="checkbox" />
          </td>
          <td>${i + 1}</td>
          <td>${item.title}</td>
          <td class="img">
            <img src="${item.img}" style="width: 70px; height: 70px" alt="" />
          </td>
          <td class="price">${item.price}</td>
          <td class="num">
            <span class="reduce">-</span>
            <input value="1" type="text" />
            <span class="add">+</span>
          </td>
          <td class="account">${item.price}</td>
          <td>
            <button class="del" data-id='${item.id}'>删除</button>
          </td>
        </tr>
        `
              )
              .join("");
            $("tbody").html(arr);
          },
        });
      }

      render();
      $("tbody").on("click", ".add", function () {
        let i = $(this).siblings("input").val();
        i++;
        $(this).siblings("input").val(i);
        $(this).parents("tr").find(".check").prop("checked", true);
        check = Array.from($(".check"));
        $(".allcheck").prop(
          "checked",
          check.every((item) => item.checked === true)
        );
        sum();
        // 价格小计
        let price = $(this).parents(".num").siblings(".price").html();
        $(this)
          .parents(".num")
          .siblings(".account")
          .html(i * price);
        sum();
      });
      // 2.全选控制
      $(".allcheck").change(function () {
        $(".check").prop("checked", $(this).prop("checked"));
        sum();
      });

      // 3.反选控制
      $("tbody").on("change", ".check", function () {
        check = Array.from($(".check"));
        $(".allcheck").prop(
          "checked",
          check.every((item) => item.checked === true)
        );
        sum();
      });

      //  点击-号
      $("tbody").on("click", ".reduce", function () {
        let i = $(this).siblings("input").val();
        i--;
        if (i <= 0) return;
        $(this).siblings("input").val(i);
        // 价格小计
        let price = $(this).parents(".num").siblings(".price").html();
        $(this)
          .parents(".num")
          .siblings(".account")
          .html(i * price);
        sum();
      });
      // 更改数量
      $("tbody").on("change", ".num input", function () {
        $(this).parents("tr").find(".check").prop("checked", true);
        let i = $(this).val();
        // 价格小计
        let price = $(this).parents(".num").siblings(".price").html();
        $(this)
          .parents(".num")
          .siblings(".account")
          .html(i * price);
        sum();
      });
      // 商品总计
      function sum() {
        let check = Array.from($(".check:checked"));
        let number = 0;
        let money = 0;
        check.forEach((item) => {
          const num = +$(item)
            .parents("td")
            .siblings(".num")
            .children("input")
            .val();
          number += num;
          const price = +$(item).parents("td").siblings(".account").html();
          money += price;
        });
        $(".totalNum i").html(number);
        $(".totalPrice i").html(money);
      }
      sum();

      // 删除部分
      $("tbody").on("click", ".del", function () {
        // alert(111)
        let index = +$(this).attr("data-id");
        $.ajax({
          url: "http://124.223.14.236:3001/api/cart/delete/" + index,
          method: "DELETE",
          headers: {
            Authorization: localStorage.getItem("token"),
          },
          success(res) {
            console.log(res);
            if (res.success) {
              alert("删除成功");
            }
          },
        });
        render();
        sum();
      });
    </script>
  </body>
</html>
